<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>查看编辑详情</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="assets/layui/css/layui.css">
<style>
	.layui-input, .layui-select, .layui-textarea{
		line-height: 32px;
	}
	.layui-breadcrumb{
		visibility: visible;
	}
	.addInput,.add-car-location,.add-car-img,.add-car-date{
		padding-top:20px;
		display: inline-block;
	}
	.layui-layer-content{
		padding-top: 20px;
	}
	.imgupload {
		position: relative;
	}
	.imgupload .delbtn{
		position: absolute;
    right:10px;
    top:10px;
	}
  .imgupload blockquote img{
  	width:200px;
  	height:200px;
  	margin:0 15px 15px 0;
  }
  #add-pic{
  	width:199px;
  	height: 199px;
  	border:1px solid #ccc;
  	border-radius: 2px;
  	color:#ccc;
  	text-align: center;
  	line-height:199px;
  	background: none;
  	font-size:80px;
  	float:left;
  	margin-right: 10px;
  }

  .delbtn{
  	font-size:18px;color:red;cursor: pointer;height: 34px;line-height: 34px;
  }
  .case{margin-top: 15px;width:400px;}

		.bMap{position: relative;}
		.bMap .map-warp{position: absolute;left:0;width:100%;height:400px;top:34px;display: none;}
		.bMap input{width:100%;height:30px;line-height: 30px;border:1px solid #d7d7d7;}
		.tangram-suggestion-main{z-index: 9999}
		.layui-form-label{
			width:110px;
		}
</style>
</head>
	<body style="margin:20px 0">
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
		  <script src="assets/js/html5.min.js"></script>
		  <script src="assets/js/respond.min.js"></script>
		<![endif]-->   
		
		<div class="layui-container">
			
			 <!--<div class="layui-text">
			 		<h2 class="layui-field-title" style="text-align: center;">请详细填写以下内容</h2>
			 </div>-->
			 <form class="layui-form" action="">
			 		<div class="layui-form-item carInforWrap">
				    <div class="layui-inline">
				      <label class="layui-form-label">报案号</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required"  autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn" style="">&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">所属分公司</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required"  autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn" >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">车型</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required"  autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">车牌</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required"  autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">车辆户籍地</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required"  autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">分支机构</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required"  autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">车架号（vin码）</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required"  autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">发动机号</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required" autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <!--<div class="layui-inline">
				      <label class="layui-form-label">登记日期</label>
				      <div class="layui-input-inline">
				        <input type="text" name="date" id="date" lay-verify="date" placeholder="年-月-日" autocomplete="off" class="layui-input layui-date">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">出险日期</label>
				      <div class="layui-input-inline">
				        <input type="text" name="date1" id="date1" lay-verify="date" placeholder="年-月-日" autocomplete="off" class="layui-input layui-date">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>-->
				    <div class="layui-inline">
				      <label class="layui-form-label">车辆性质</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required"  autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">车辆类型</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required"  autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">承保金额</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required"  autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">估损金额</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required"  autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">全损金额</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required" autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <!--<div class="layui-inline">
				      <label class="layui-form-label">发证日期</label>
				      <div class="layui-input-inline">
				        <input type="text" name="date2" id="date2" lay-verify="date" placeholder="年-月-日" autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>-->
				    <div class="layui-inline">
				      <label class="layui-form-label">车辆归尾</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required"  autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">品牌型号</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required" autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">出险经过</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required" autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>
				    <div class="layui-inline">
				      <label class="layui-form-label">发布人员</label>
				      <div class="layui-input-inline">
				        <input type="text" name="" lay-verify="required" autocomplete="off" class="layui-input">
				      </div>
				      <i class="layui-icon delbtn"  >&#x1006;</i>
				    </div>				    				   			    
				  </div>
				  <div class="car-location">
				  	<div class="layui-form-item" >
					    <label class="layui-form-label">车辆停放地</label>
					    <div class="layui-input-inline">
                    <select name="provid" id="provid" lay-filter="provid">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="cityid" id="cityid" lay-filter="cityid">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="areaid" id="areaid" lay-filter="areaid">
                        <option value="">请选择县/区</option>
                    </select>
                </div>
					    
					  </div>
					  <div class="layui-form-item">
						    <div class="layui-inline">
						      <label class="layui-form-label"></label>
						      <div class="layui-input-inline">
						        <input style="width:590px" type="text" name="" placeholder="详细地址"  autocomplete="off" class="layui-input">
						      </div>
						     
						    </div>
						</div>
				  	<div class="layui-form-item">
						  	<div class="layui-inline">
									<label class="layui-form-label">车辆地图定位</label>
									<div class="layui-input-inline" style="width:400px">
										<div class="case">
											 <div class="bMap" id='case3'></div>
											 <div id="callback">
											 	
											 </div>
										</div>
										
									</div>
									<!--<i class="layui-icon delbtn"  >&#x1006;</i>-->
								</div>
					  </div>
				  </div>
				  <div class="car-img">
				    <div class="layui-upload imgupload layui-clear">
								<blockquote class="layui-elem-quote layui-quote-nm layui-clear" style="margin-top: 10px;">照片上传(<span style="color: red;">点击图片可将其删除</span>)：
									<div class="layui-upload-list" id="pics-wrap"><button type="button" class="layui-btn" id="add-pic" >+</button></div>
								</blockquote>
								<!--<i class="layui-icon delbtn">&#x1006;</i>-->
				  	</div>
				  </div>
				  <div style="text-align: center;margin:20px auto;">

						 	<button class="layui-btn">保  存</button>
						 	<button class="layui-btn" lay-submit lay-filter="submit-btn">提  交</button>
					</div>					
			 </form>
				
			 <div class="addInput">
			 		<button class="layui-btn layui-btn-primary">
			 				<i class="layui-icon">&#xe608;</i> 添加自定义属性
			 		</button>
			 </div>
			 <!--<div class="add-car-location">
			 		<button class="layui-btn layui-btn-primary">
			 				<i class="layui-icon">&#xe608;</i> 添加车辆停放地定位
			 		</button>
			 </div>
			 <div class="add-car-img">
			 		<button class="layui-btn layui-btn-primary">
			 				<i class="layui-icon">&#xe608;</i> 添加照片上传属性
			 		</button>
			 </div>-->
			 <div class="add-car-date">
			 		<button class="layui-btn layui-btn-primary">
			 				<i class="layui-icon">&#xe608;</i> 添加日期属性
			 		</button>
			 </div>
	
		</div>
		
		<script src="assets/layui/layui.js"></script>
		<script src="assets/js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EZPCgQ6zGu6hZSmXlRrUMTpr"></script>
	  <script type="text/javascript" src="assets/js/map.jquery.min.js"></script>
	  <!--地区选择-->
	  <script type="text/javascript" src="assets/js/data.js"></script>
    <script type="text/javascript" src="assets/js/province.js"></script>
    <script type="text/javascript">
        var defaults = {
            s1: 'provid',
            s2: 'cityid',
            s3: 'areaid',
            v1: null,
            v2: null,
            v3: null
        };

    </script>
    <!--//地区选择-->
		<script>
		//JavaScript代码区域
		layui.use(['form', 'layedit', 'laydate','upload'], function(){
		  var form = layui.form
		  ,layer = layui.layer
		  ,layedit = layui.layedit
		  ,laydate = layui.laydate
		  ,upload = layui.upload;
		  

		  
		  // 执行多个laydate实例
				$(".layui-date").each(function () {
						laydate.render({
							elem: this //指定元素
						});
				});
		  //多图片上传
				  upload.render({
				  	elem: '#add-pic',
				  	url: '/upload/',
				  	multiple: true,
				  	before: function(obj) {
				  		//预读本地文件示例，不支持ie8
				  		obj.preview(function(index, file, result) {
				  			$('#pics-wrap').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
				  		});
				  	},
				  	done: function(res) {
				  		//上传完毕
				  	}
				  });

				  //删除图片
				  $("body").delegate('.imgupload blockquote img', 'click', function(self) {
				  	$(this).remove();
//				  	layer.confirm('确定删除此图片吗', {
//				  		btn: ['确定', '取消']
//				  	}, function(obj) {
//				  		layer.close(obj);
//				  	});

				  });
				  
				  //自定义验证规则
		  form.verify({
		    title: function(value){
		      if(value.length < 5){
		        return '标题至少得5个字符啊';
		      }
		    }
		    ,pass: [/(.+){6,12}$/, '密码必须6到12位']
		    ,content: function(value){
		      layedit.sync(editIndex);
		    }
		  });
		  
		  //监听提交
		  form.on('submit(submit-btn)', function(data){
		    layer.alert(JSON.stringify(data.field), {
		      title: '最终的提交信息'
		    })
		    return false;
		  });
		  
		  //添加自定义表单
		  function addNew(){
		  	layer.open({
				  type: 1, 
				  title:'添加自定义属性',
				  area : ['350px' , '220px'],
				  btn:['确认','取消'],
				  yes: function(index){
				      layer.close(index);
				      var theValue = $("#newInput").val();
				      var newLine = '<div class="layui-inline"><label class="layui-form-label">'+theValue+'</label><div class="layui-input-inline"><input type="text" name="" lay-verify="required" autocomplete="off" class="layui-input"></div><i class="layui-icon delbtn">&#x1006;</i></div>';
				      if(theValue.length){
				      	$(".carInforWrap").append(newLine);
				      }
				         
				  },
				  content: '<div class="layui-form-item"><label class="layui-form-label">属性名称:</label><div class="layui-input-inline"><input id="newInput" type="text" name=""  autocomplete="off" class="layui-input"></div></div>'
				});
			
		  };
		  
		  $("body").delegate('.addInput button','click',function(){
		  	 addNew();
		  });
		  
		  //添加日期属性
		  $("body").delegate('.add-car-date button','click',function(){
 
				     layer.open({
							  type: 1, 
							  title:'添加日期属性',
							  area : ['350px' , '220px'],
							  btn:['确认','取消'],
							  yes: function(index){
							      layer.close(index);
							      var theValue = $("#newInput").val();
							      var newLine = '<div class="layui-inline"><label class="layui-form-label">'+theValue+'</label><div class="layui-input-inline"><input type="text" name="enddate" id="enddate" lay-verify="date" placeholder="年-月-日  时：分：秒" autocomplete="off" class="layui-input layui-date"></div><i class="layui-icon delbtn"  >&#x1006;</i></div>';
							      if(theValue.length){
							      	$(".carInforWrap").append(newLine);
							      };
							      //时间选择器
									  $(".layui-date").each(function () {
												laydate.render({
														elem: this //指定元素
														,type: 'datetime'
												});
										});
							         
							  },
							  content: '<div class="layui-form-item"><label class="layui-form-label">属性名称:</label><div class="layui-input-inline"><input id="newInput" type="text" name=""  autocomplete="off" class="layui-input"></div></div>'
							});
				      
				      
		  });
		  
		  //添加车辆停放地定位
//		  $("body").delegate('.add-car-location button','click',function(){
//		  	  var newLine = '<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">车辆停放地</label><div class="layui-input-inline" style="width:400px"><div class="case"><div class="bMap" id="case3"></div><div id="callback"></div></div></div><i class="layui-icon delbtn"  >&#x1006;</i></div></div>';
//				  $(".car-location").append(newLine);
//					$("#case3").bMap({name:"callback",callback:function(address,point){
//						$("#callback").html("您选择的地址是:"+JSON.stringify(address))
//					}});
//		  });
		  
		  //添加照片上传属性
//		  $("body").delegate('.add-car-img button','click',function(){
//		  	  var newLine = '<div class="layui-upload imgupload layui-clear"><blockquote class="layui-elem-quote layui-quote-nm layui-clear" style="margin-top: 10px;">照片上传：<div class="layui-upload-list" id="pics-wrap"><button type="button" class="layui-btn" id="add-pic">+</button></div></blockquote><i class="layui-icon delbtn">&#x1006;</i></div>';
//				  $(".car-img").append(newLine);
//				  
//					
//		  });

		  //删除表单
		  $("body").delegate('.delbtn','click',function(){
		  	$(this).parent(".layui-inline").remove();
		  	$(this).parent(".imgupload").remove();
		  });
		  
		  
		  //地图定位
//		  $(function(){
		//		$("#case1").bMap();
		//		$("#case2").bMap({name:"address",address:"贞观国际"});
				$("#case3").bMap({name:"callback",callback:function(address,point){
					$("#callback").html("您选择的地址是:"+JSON.stringify(address))
				}});
//			})
				
				
		  
		  
		});
		
		
		
</script>

	</body>
</html>
